<template>
  <div class="console-index">

    <div class="console-wrap">

      <el-row :gutter="10" class="index-top">
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goPutstore">
            <div class="icon-item">
              <i style="color:#409fff" class="el-icon-document-add"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{Worder}}</div>
              <div class="item-info-title">入库单</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goOutstore">
            <div class="icon-item">
              <i style="color:#32cd32" class="el-icon-document-remove"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{Dorder}}</div>
              <div class="item-info-title">出库单</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goAllotstore">
            <div class="icon-item">
              <i style="color:#48d1cc" class="el-icon-takeaway-box"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{Aorder}}</div>
              <div class="item-info-title">调拨单</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goInventstore"> 
            <div class="icon-item">
              <i style="color:#daa520" class="el-icon-document-checked"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{Corder}}</div>
              <div class="item-info-title">盘点单</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goDestroy">
            <div class="icon-item">
              <i style="color:#ff0000" class="el-icon-receiving"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{Destroy}}</div>
              <div class="item-info-title">报废单</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="4" :xl="4">
          <div class="top-item" @click="goDatewarning">
            <div class="icon-item">
              <i style="color:#8b4513" class="el-icon-date"></i>
            </div>
            <div class="item-info">
              <div class="item-info-num">{{OverdueWarning}}</div>
              <div class="item-info-title">到期预警</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="background-color:#fff;margin-bottom:20px">
            <ve-line :data="chartData"></ve-line>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="background-color:#fff;margin-bottom:20px">
            <ve-histogram :data="ordernum"></ve-histogram>
          </div>  
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="background-color:#fff;margin-bottom:20px;text-align:center">
            <div style="padding:20px;font-size: 18px;font-weight:700;color:#666">各分类车辆占比</div>
            <ve-pie :data="carlist"></ve-pie>
          </div>  
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <div style="background-color:#fff;margin-bottom:20px;text-align:center">
            <div style="padding:20px;font-size: 18px;font-weight:700;color:#666">在库装备分类占比</div>
            <ve-pie :data="prodCateData"></ve-pie>
          </div>
        </el-col>
      </el-row>

      

    </div>

  </div>
</template>

<script>
import { OneWeekCount, CateprodsCount, indexOrderNum, getCurrentDate, getCateCarlist } from '@/api/login';
export default {
  data() {
    
    return {
      Worder: '',
      Dorder: '',
      Aorder: '',
      OverdueWarning: '',
      Destroy: '',
      Corder: '',
      chartData: {
        columns: ['日期', '今日入库', '今日出库'],
        rows: []
      },
      ordernum: {
        columns: ['库区', '今日入库', '今日出库'],
        rows: []
      },
      carlist: {
        columns: ['categoryName', 'carNum'],
        rows: []
      },
      prodCateData: {
        columns: ['categoryName', 'prodStocknum'],
        rows: []
      }
    }
  },
  mounted() {
    this.getOneWeek();
    this.getprodByCate();
    this.getOrderNum();
    this.getCurrentOrder();
    this.getCatecar()
  },
  // updated() {
  //   this.getOneWeek();
  //   this.getprodByCate();
  //   this.getOrderNum()
  // },

  methods: {
    goPutstore() {
      this.$router.push('/putstore')
    },
    goOutstore() {
      this.$router.push('/outstore')
    },
    goAllotstore() {
      this.$router.push('/allot')
    },
    goInventstore() {
      this.$router.push('/inventory')
    },
    goDestroy() {
      this.$router.push('/destory')
    },
    goDatewarning() {
      this.$router.push('/datewarning')
    },
    // 获取一周出入库数量
    getOneWeek() {
      OneWeekCount().then( res => {
        this.chartData.rows = res.data.data.reverse();
      })
    },
    // 获取分类下在库数量
    getprodByCate() {
      CateprodsCount().then( res => {
        this.prodCateData.rows = res.data;
      })
    },
    // 获取各个订单数量
    getOrderNum () {
      indexOrderNum().then( res => {
        let data = res.data[0];
        this.Worder = data.Worder;
        this.Dorder = data.Dorder;
        this.Aorder = data.Aorder;
        this.OverdueWarning = data.OverdueWarning;
        this.Destroy = data.Destroy;
        this.Corder = data.Corder;
      })
    },
    // 获取分类下在库数量
    getCurrentOrder() {
      getCurrentDate().then( res => {
        this.ordernum.rows = res.data.data;
      })
    },
    // 获取分类车辆
    getCatecar() {
      getCateCarlist().then( res => {
        this.carlist.rows = res.data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .console-index {
    color: #333;
    margin: -20px;
    background-color: #f0f2f5;
    height: 100%;
  }
  .console-wrap {
    padding: 10px 20px 0 10px;
  }
  .index-top {
    margin-bottom: 10px;
    width: 100%;
    .top-item {
      height: 120px;
      background-color: #fff;
      display: flex;
      margin-bottom: 20px;
      cursor: pointer;
      &:hover {
        opacity: 0.5;
      }
      .icon-item {
        width: 50%;
        line-height: 140px;
        text-align: center;
        i {
          // margin-left: 20px;
          font-size: 50px;
        }
      }
      .item-info {
        width: 50%;
        margin: 30px auto;
        line-height: 30px;
        text-align: center;
        .item-info-num {
          font-size: 28px;
          color: #333;
        }
        .item-info-title {
          font-size: 16px;
          color: #666;
        }
      }
    }
  }
</style>